<template>
  <delay :timeout="10/1000">
    <div class="detail-swiper" v-if="swiper && swiper.length > 0">
      <cube-slide
        :data="swiper"
        :speed="800"
        :interval="3000"
        class="swiper"
      >
        <cube-slide-item
          v-for="(item, index) in swiper"
          :key="index"
          class="item"
        >
          <img :src="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </cube-slide-item>
      </cube-slide>
    </div>
  </delay>
</template>

<script>
import Delay from '@/components/Delay'
export default {
  props: ['swiper'],
  components: {
    Delay
  }
}
</script>

<style scoped lang="stylus">
.detail-swiper
  //height 105px
  //border-radius 10px
  //margin 10px
  background white
  padding 10px
  .swiper
    .item
      //display flex
      //align-items center
      img
        width 100%
        height 100%

</style>
